<template>
  <div class="rec-box">
    <div class="eat-header">
      <!-- <router-link to="/recipes" tag="i" class="iconfont icon-fanhui"></router-link> -->
      <i @click="go" class="iconfont icon-fanhui"></i>
      <h2>能不能吃</h2>
    </div>
    <div class="eat-content">
      <div class="eat-search">
        <i class="iconfont icon-ai-search"></i>
        <input type="text" placeholder="输入名称搜索">
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    go () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.eat-header {
  @include rect(100%, 0.42rem);
  background: rgba(248, 196, 174, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #6e5757;
  }
}
.eat-content {
  @include rect(100%, auto);
  .eat-search {
    width: 3.15rem;
    height: 0.34rem;
    border-radius: 0.12rem;
    background-color: rgb(231, 231, 231);
    border: 1px solid rgba(255, 255, 255, 0);
    margin: 0.1rem auto;
    i {
      display: inline-block;
      @include rect(0.3rem, 0.34rem);
      text-align: center;
      line-height: 0.34rem;
      margin-left: 0.1rem;
    }
    input {
      border: none;
      height: 0.3rem;
      background: none;
      font-size: 0.14rem;
      margin-top: -0.1rem;
      margin-left: 0.1rem;
    }
  }
}
</style>
